<template>
    <MyCard>
        <div class="title">
            <div></div>
            新增服务包
        </div>
        <el-card shadow='never' style='border:none'>
            <div class="cardLine">服务包信息</div>
            <el-form :inline="true" :style="{ border: 'none' }" label-width="90">
                <el-form-item label="服务包名称">
                    <el-input placeholder="请输入" v-model="formItem.name"></el-input>
                </el-form-item>
                <el-form-item label="服务包类型">
                    <el-select placeholder="请选择" v-model="formItem.type">
                        <el-option :label="item?.type" :value="item?.type" v-for="item in servicePacksTypesArray"
                            :key="item._id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="订购价格">
                    <el-input placeholder="请输入" v-model="formItem.price">
                    </el-input>
                </el-form-item>
                <el-form-item label="服务对象">
                    <el-input placeholder="请输入" v-model="formItem.client"></el-input>
                </el-form-item>
                <el-form-item label="服务包标签">
                    <el-select placeholder="请选择" v-model="formItem.taglds" multiple collapse-tags>
                        <el-option :label="item?.name" :value="item?._id" v-for="item in tagsData"
                            :key="item._id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="签约周期">
                    <el-select placeholder="请选择" v-model="formItem.period">
                        <el-option label="1年" value="1年"></el-option>
                        <el-option label="2年" value="2年"></el-option>
                        <el-option label="3年" value="3年"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="续约情况">
                    <el-radio-group v-model="formItem.renew">
                        <el-radio value="1" size="large">可签约</el-radio>
                        <el-radio value="2" size="large">不可签约</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div style="margin-bottom: 30px;">
                    <el-form-item label="服务包图片">
                        <el-upload class="avatar-uploader" action="http://nocat.life:3012/images/upload"
                            :show-file-list="false" :on-success="handleAvatarSuccess">
                            <img v-if="formItem.image" :src="formItem.image" class="avatar" />
                            <div class="imageShow flex-ct" v-else>
                                +上传图片
                            </div>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image" />
                        </el-dialog>




                    </el-form-item>
                    <div style="font-size: 12px;color: #CCCCCC; margin-left: 90px;">图片尺寸800*600px,可上传多张</div>
                </div>
                <el-form-item label="服务介绍">
                    <el-input v-model="formItem.intro" style="width: 580px" :rows="5" type="textarea"
                        placeholder="请输入" />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow='never' style='border:none'>
            <div class="cardLine">
                <span>服务项目</span>
                <el-button type="primary" @click="onAddServiceBtn?.openDialog">添加项目服务</el-button>
            </div>
            <MyTable :columns="columns" :stripe="true" :data="choseData">
                <template #action="scoped">
                    <el-button link style="border: none;" type="danger" @click="deleteChoseItem(scoped.row)">
                        删除
                    </el-button>
                </template>
            </MyTable>
        </el-card>
        <el-card shadow='never' style='border:none'>
            <div class="cardLine">
                <span>服务详情字段</span>
            </div>
            <template v-for="item in textItemsArray">
                <div style="display: flex; margin-bottom: 20px;">
                    <span style="margin-right: 10px; display: inline-block; width: 100px;color: #999999;
    text-align: left;">{{ item.name }}</span>
                    <el-input v-model="item.text" style="width: 400px;" :rows="5" type="textarea" placeholder="请输入" />
                    <div style="margin-top: 50px;margin-left: 20px;">
                        <el-space>
                            <el-icon color="#0256FF">
                                <EditPen />
                            </el-icon>
                            <el-icon color="#07dd07">
                                <Top />
                            </el-icon>
                            <el-icon color="#eb371f">
                                <Delete />
                            </el-icon>
                        </el-space>
                    </div>
                </div>
            </template>
            <span style="display: inline-block; margin-left: 110px; color:#0256FF ;">+增加一条字段</span>
        </el-card>
        <el-card shadow='never' style='border:none'>
            <el-space>
                <el-button type="primary" @click="onSubmitBtn()">提交审核</el-button>
                <router-link to="/data/servicePack/list"><el-button>返回</el-button></router-link>
            </el-space>
        </el-card>



    </MyCard>
    <AddProjectServices v-model="choseData" ref="openDialog"></AddProjectServices>
</template>

<script setup>
import { EditPen, Top, Delete, Picture } from '@element-plus/icons-vue'
import { onMounted, reactive, ref, useTemplateRef } from 'vue';
import { addServicePacksApi, getServicePacksTypesApi } from '../../../api/servicePacks';
import AddProjectServices from './addProjectServices.vue';
import { findTagApi } from '../../../api/tagcontrol';
import { useRouter } from 'vue-router';
import MyCard from '../../../components/MyCard.vue';

const servicePacksTypesArray = ref([]);
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const choseData = ref([]);
const tagsData = ref([]);
const columns = ref([
    { label: '项目编号', prop: '_id' },
    { label: '项目名称', prop: 'name' },
    { label: '次数', prop: 'count' },
    { label: '项目类型', prop: 'type' },
    { label: '项目介绍', prop: 'intro' },
    { label: '操作', prop: 'action' },
]);
const textItemsArray = ref([
    { name: '病情描述', text: '' },
    { name: '健康指导', text: '' },
    { name: '备注', text: '' }
]);
const router = useRouter();
const onAddServiceBtn = useTemplateRef('openDialog');
onMounted(() => {
    getServicePacksTypes();
    findTag();
})
const formItem = ref({
    renew: 1,
});

//上传图片完成后接受返回的请求参数并赋值给formItem达到回显
const handleAvatarSuccess = (
    res,
) => {
    formItem.value.image = res.data;

};




function getFinalData() {
    // formItem.value = {...f};
    formItem.value.serviceltemlds = (choseData.value).map(item => item._id);
}


function findTag() {
    findTagApi().then(res => {
        if (res.code == 200) {
            tagsData.value = res.data.rows;
        }
    })
}
function onSubmitBtn() {
    getFinalData();
    console.log(formItem.value);

    ElMessageBox.confirm(
        '确定提交服务包申请吗？',
        '确认提交',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            addServicePacksApi({ ...formItem.value }).then(res => {
                if (res.code == 200) {
                    ElMessage.success('提交成功!');
                    router.replace('/data/servicePacks/manage')
                }
            })
        })
        .catch(() => {
            ElMessage.error(res.message);
        })


}
//删除项目服务
function deleteChoseItem(item) {
    ElMessageBox.confirm(
        '删除后无法恢复，定要删除此条记录吗？',
        '确认删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            choseData.value = (choseData.value).filter(temp => temp._id != item._id);
        })
        .catch(() => { })

}

function getServicePacksTypes() {
    getServicePacksTypesApi().then(res => {
        if (res.code == 200) {
            servicePacksTypesArray.value = (res.data).filter(item => item.type)
        }
    })
}
</script>

<style lang="scss" scoped>
.title {
    display: flex;
    line-height: 1;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.898039215686275);

    div {
        margin-top: -1px;
        width: 6px;
        height: 23px;
        background-color: rgba(41, 132, 248, 1);
        border-radius: 60px;
        margin-right: 10px;
    }


}

.cardLine {
    border-top: 1px solid #f3efef;
    padding-top: 15px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
}

.el-select {
    width: 195px;
}

.avatar-uploader .avatar {
    width: 223px;
    height: 120px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px solid #282c34;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: width 2s ease-in-out;
}

.imageShow {
    width: 223px;
    height: 120px;
    text-align: center;
    border: 1px solid rgba(242, 242, 242, 1);
    box-shadow: none;
    font-size: 14px;
    color: #CCCCCC;
    border-radius: 8px;
    background-color: rgba(242, 242, 242, 0.498039215686275);
}

.imageShow:hover {
    color: #0256FF;
}
</style>
